<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行css搞定响应式布局</title>
</head>
<style>
    .container {
        display: grid;
        grid-gap: 5px;
        /* CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 */
        /* auto-fit。让我们跳过固定数量的列，替换为自适应数量  minmax()函数定义的范围大于或等于 min， 小于或等于 max */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        /* repeat()函数。这是一个强大的指定列和行的方法。 */
        grid-template-rows: repeat(2, 100px);
        color: white;
        font-size: 30px;
        text-align: center;
        overflow: hidden;
    }

    .container div:nth-child(1) {
        background: darkkhaki;
    }

    .container div:nth-child(2) {
        background: skyblue;
    }

    .container div:nth-child(3) {
        background: pink;
    }

    .container div:nth-child(4) {
        background: palegoldenrod;
    }

    .container div:nth-child(5) {
        background: powderblue;
    }

    .container div:nth-child(6) {
        background: yellowgreen;
    }

    .container>div>img {
        width: 100%;
        height: 100%;
        /* 将object-fit 设置成cover，这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。 */
        object-fit: cover;
    }
</style>

<body>
    <div class="container">
        <div><img src="images/1.jpg" /></div>
        <div><img src="images/2.jpg" /></div>
        <div><img src="images/3.jpg" /></div>
        <div><img src="images/4.jpg" /></div>
        <div><img src="images/5.gif" /></div>
        <div><img src="images/6.jpg" /></div>
    </div>
</body>

</html>